<template>
  <div class="lock-screen" @click.self="handleClick">
    <div class="lock-screen-content">
      <h1>请输入密码解锁</h1>
      <el-input v-model="password" type="password" placeholder="请输入密码" />
      <el-button @click="unlock">解锁</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const password = ref('');
const router = useRouter();

const unlock = () => {
  // 这里简单假设密码为 '123456'，你需要根据实际情况进行密码验证
  if (password.value === '123456') {
    ElMessage.success('解锁成功');
    router.push('/home');
  } else {
    ElMessage.warning('密码错误，请重新输入');
  }
};

const handleClick = (e: MouseEvent) => {
  // 阻止点击事件冒泡，防止点击锁屏背景时触发其他操作
  e.stopPropagation();
};
</script>

<style scoped lang="scss">
.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lock-screen-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* 在锁屏页面样式中添加 */
.layout-navbars-breadcrumb {
  display: none !important;
}
</style>